var cir_box = document.querySelector(".cir_box");
var bigTable = document.querySelector(".bigTable");//主桌大div
var circle = bigTable.querySelectorAll(".circle");
var cir_box = document.querySelector(".cir_box");//次卓大div
var ci_circle = cir_box.querySelectorAll(".circle");
var tables = document.querySelectorAll(".hastable");//次卓大div儿子
var addtable = document.querySelector(".addtable");//添桌
var f_text = document.querySelector(".f_text");//
var f_text2 = document.querySelector(".f_text2");


function create(i){ //创建桌子
    var sontable = document.createElement("div"); //创建次桌子div
    sontable.classList.add("table","hastable");//创建次桌类名
    sontable.setAttribute("data-bnum","第"+i);//自定义属性
    sontable.innerHTML = `<span class="t_txt">第${i}席</span>
                        <div class="circle circletof circleT ">
                                <div data-num= "1"  data-sel="f_alse"><img class="con" src="img/c_tcon.png"></div>
                        </div>
                        <div class="circle circletof circleLt">
                                <div data-num= "2"  data-sel="f_alse"><img class="con" src="img/c_tcon.png"></div>
                        </div>
                        <div class="circle circletof circleRt"><div data-num= "3"  data-sel="f_alse"><img class="con" src="img/c_tcon.png"></div></div>
                        <div class="circle circletof circleLb"><div data-num= "4"  data-sel="f_alse"><img class="con" src="img/c_tcon.png"></div></div>
                        <div class="circle circletof circleRb"><div data-num= "5"  data-sel="f_alse"><img class="con" src="img/c_tcon.png"></div></div>
                        <div class="circle circletof circleB"><div data-num= "6"  data-sel="f_alse"><img class="con" src="img/c_tcon.png"></div></div>`

    
    cir_box.appendChild(sontable);
}
for(let i = 1;i<6;i++){
    create(i);
}
function createadd(){//创建添加桌子的div
    var jiahao = document.createElement("div");
    jiahao.classList.add("addtable");
//     jiahao.setAttribute("onclick","addclick()");
    jiahao.innerHTML = `<span class="addBTN"></span>
    <div class="circle circleT" data-xs="no">
            <div data-sel="f_alse"></div>
    </div>
    <div class="circle circleLt" data-xs="no">
            <div data-sel="f_alse"></div>
    </div>
    <div class="circle circleRt"  data-xs="no"><div data-sel="f_alse"></div></div>
    <div class="circle circleLb" data-xs="no"><div data-sel="f_alse"></div></div>
    <div class="circle circleRb" data-xs="no"><div data-sel="f_alse"></div></div>
    <div class="circle circleB" data-xs="no"><div data-sel="f_alse"></div></div>`

    cir_box.appendChild(jiahao); 
}
createadd();
var tableNum = 5; //用于渲染新添加的桌子的数值
cir_box.onclick=function(ev){   //事件委派，点击父级
        var ev = ev||window.event;  //兼容性写法,标准浏览器用ev.target，IE浏览器用event.srcElement
        var target = ev.target || ev.srcElement;  
        console.log(ev);//target: div.circle.circletof.circleT.
        //桌子放大效果
        if(target.classList[0] == "table"){  //如果点击的目标是桌子
                console.log("放大");
                bigTable.style.display = "none";
                var tables = document.querySelectorAll(".hastable");//获取每一个次桌的元素
                var addtable = document.querySelector(".addtable");//获取添桌的元素
                console.log(tables);
                for(let i = 0;i<tables.length;i++){
                        tables[i].style.display = "none";//其余的全部none掉
                }
                target.style.display = "block";//点击那个的block
                target.style.left = "40%" 
                target.style.top = "23vh";   
                target.style.transform = "scale(2.7)";
                addtable.style.display = "none";  //添加桌子的也none掉
                f_text.style.display = "none";
                f_text2.style.display = "block"; 
        //检测桌子是否填满，能否添加
        }else if(target.classList[0] == "addBTN"){  //如果点击的目标是那个要添加桌子的按钮
                var circletof= document.getElementsByClassName("circletof");//获取每一个小桌子,
                var arr = []; //创建数组来检测是否有桌子没选中
                for(let i = 0;i<circletof.length;i++){
                        arr.push(circletof[i].children[0].dataset.sel);   
                }
                if(arr.includes("f_alse")){ //检测数组里面有没有包含f_alse,f_alse是自定义属性的值
                        return alert("位置还没坐满");         
                }else{//如果全都坐满人了
                        tableNum++;  //渲染桌子的数值
                        var addtable = document.querySelector(".addtable");//添加桌子的按钮
                        addtable.remove();//把自己删除掉
                        create(tableNum);//然后在大盒子后面添加新的桌子
                        createadd();  //再把添加按钮加回来
                }
        }else if(target.classList[0] == "circle"||target.classList[0] == "con"){//次桌选座位
                //如果选中的是小圆或者里面的图片
                //点击显示人数图片
                if(target.classList[0] == "con"){//如果点击的是图片
                        target = target.parentNode; //目标改为它的父级
                        console.log(target);
                        let obj = getComputedStyle(target.children[0],null).display; //查询它的样式
                        console.log(obj);
                        if(obj == "none"){ //如果是none
                                target.style.display = "inline-block";
                                target.dataset.sel = "t_ure";
                               
                        }else if(obj == "inline"||obj == "inline-block"){//如果是显示
                                console.log(123);
                                target.style.display = "none";
                                target.dataset.sel = "f_alse";
                                console.log(target);
                       
                        }
                     //为什么需要两个上下两个判断
                }else{//第二个判断是因为我们可能点中图片也可能点中那个小圆所以要加上这个
                        let obj = getComputedStyle(target.children[0],null).display;
                        console.log(obj);
                        if(obj == "none"){
                                f_text2.style.opacity = "1";
                                console.log(f_text2);
                                f_text.style.opacity = "0";
                                console.log(target.children[0].parentNode);
                                if(target.children[0].parentNode.dataset.xs=="no"){
                                        var  _text = " ";
                                        f_text2.innerHTML = _text;
                                        // f_text.innerHTML = _text;
                                }else{
                                         // console.log(target);
                                target.children[0].style.display = "inline-block";
                                target.children[0].dataset.sel = "t_ure";
                                //////////////////////////////////////////////////////
                                //把第几桌渲染上去
                                var num =target.children[0].dataset.num;
                                console.log(bigTable.dataset.bnum);
                                console.log(target.parentNode);
                                var bnum=target.parentNode.dataset.bnum;
                                var  _text = "你已成功入席，<br>你的座位是<span>"+bnum+"</span> 桌第<span>"+num+"</span>位";
                                f_text2.innerHTML = _text;
                                // f_text.innerHTML = _text;
                                //////////////////////////////////////////////////////////
                                console.log(target.parentNode);
                                }
                               
  
                                ////////////////////////////////////////////////////////////
                        }else if(obj == "inline-block"){
                                console.log(123);
                                target.children[0].style.display = "none";
                                target.children[0].dataset.sel = "f_alse";
                        }
                }
              var parentCirbox = target.parentNode.parentNode; //获取最大的盒子
              var circle = document.querySelectorAll(".circle");
              var count = 0;
              for(let n = 0; n<circle.length; n++){
                      console.log(circle[n].children[0].dataset.sel);
                      if(circle[n].children[0].dataset.sel == "t_ure"){
                              count++;
                      }
              }
              f_text.style.opacity = "1";
              var f_text_txt = "目前已有"+count+"位宾客入席"
        //       var  _text = "你已成功入席，<br>你的座位是<span>"+bnum+"</span> 桌第<span>"+num+"</span>位";
              f_text.innerHTML = f_text_txt;
              console.log(count);
        }//次桌
}



   
//返回按钮
var back = document.querySelector(".back");
back.addEventListener("click",function(){
    var addtable = document.querySelector(".addtable");//添桌
    var tables = document.querySelectorAll(".hastable");//每次点击获取一次table次桌。因为它是动态生成的
    for(let i = 0;i<tables.length;i++){
            tables[i].style.display = "block";
            tables[i].style.transform = "scale(1)";
            tables[i].style.margin = "none"
            tables[i].style.left = "0%";
            tables[i].style.transform = "translateX(0)"
            tables[i].style.top = "0vw";
    }
    bigTable.style.display = "block";
    bigTable.style.top = "0vw";
    bigTable.style.transform = "scale(1)";
    f_text.style.display = "block";
    f_text2.style.display = "none";
    addtable.style.display = "block";

    ///////////////////////////////////////
    //用于计算多少桌,然后隐藏文字面板
    f_text2.style.opacity = "0";
    console.log(f_text2);
    f_text.style.opacity = "1";
    ///////////////////////////////////////
  
})

//主桌选座位
for(let i=0;i<circle.length;i++){
        circle[i].addEventListener("click",function(){
                if(circle[i].children[0].style.display == "none"){
                        circle[i].children[0].style.display = "inline-block";
                        console.log(circle[i].children[0]);
                        circle[i].children[0].dataset.sel = "t_ure";
                        console.log(circle[i].children[0].dataset.num);
                        var num = circle[i].children[0].dataset.num;
                        console.log(bigTable.dataset.bnum);
                        var bnum=bigTable.dataset.bnum
                        var  _text = "你已成功入席，<br>你的座位是主<span>"+bnum+"</span> 桌第<span>"+num+"</span>位";
                        f_text2.innerHTML = _text;
                        // f_text.innerHTML = _text;
                        f_text2.style.opacity = "1";
                        console.log(f_text2);
                        f_text.style.opacity = "0";
                }
                else if(circle[i].children[0].style.display == "inline-block"){
                        circle[i].children[0].style.display = "none";
                        circle[i].children[0].dataset.sel = "f_alse";
                        console.log(circle[i].children[0].dataset.num);
                        var num = circle[i].children[0].dataset.num;
                        console.log(bigTable.dataset.bnum);
                        var bnum=bigTable.dataset.bnum
                        var  _text = "你已成功入席，<br>你的座位是主<span>"+bnum+"</span> 桌第<span>"+num+"</span>位";
                        f_text2.innerHTML = _text;
                        // f_text.innerHTML = _text;
                }
        })
}
        
        
  bigTable.addEventListener("click",function(){
        var addtable = document.querySelector(".addtable");//添桌
        var tables = document.querySelectorAll(".hastable");//次卓大div儿子
                bigTable.style.transform = "scale(1.8)";
                bigTable.style.top = "18vh";
                addtable.style.display = "none";
                f_text.style.display = "none";
                f_text2.style.display = "block";
                for(let i = 0;i<tables.length;i++){
                    tables[i].style.display = "none";
        //          console.log(tables[i]);
                }
})






